<template>
  <view class="min-h-screen bg-gray-50">
    <view class="bg py-10 px-6 text-white">
      <view class="bg-[#000] flex items-center py-10 rounded-3">
        <view class="ml-4">
          <view class="flex items-center justify-center mb-20rpx">
            <image
              class="w-[150rpx] h-[150rpx] mr-30rpx rounded-50%"
              :src="userInfo.head || '../../static/defluat_head.png'"
              mode="widthFix"
              @click="toLoginPage"
            />
            <view class="flex flex-col">
              <view class="text-xl font-bold">{{
                userInfo.nickname ?? userInfo.name ?? '未登录'
              }}</view>
            </view>
          </view>
          <view class="flex items-center mt-1">
            <text class="text-xs bg-white/20 px-2 py-0.5 rounded">{{
              ruleMenu === 'user' ? userInfo.name : userInfo.phone
            }}</text>
            <text class="text-xs bg-green-600 px-2 py-0.5 rounded ml-2">{{
              userInfo.role === 0
                ? '用户'
                : userInfo.role === 1
                  ? '报修人员'
                  : '管理员'
            }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="-mt-6 px-6">
      <view class="bg-white rounded-xl shadow-md p-4 grid grid-cols-3 gap-2">
        <view class="text-center">
          <view class="text-2xl font-bold text-gray-800">{{
            detail?.total || 0
          }}</view>
          <view class="text-xs text-gray-500">已发起</view>
        </view>
        <view class="text-center">
          <view class="text-2xl font-bold text-gray-800">{{
            detail?.completed || 0
          }}</view>
          <view class="text-xs text-gray-500">已完成</view>
        </view>
        <view class="text-center">
          <view
            class="w-[100%] h-[100%] flex flex-col items-center justify-center mx-auto"
            @click="userProfile"
          >
            <wd-icon name="user" size="25" />
            <text class="text-xs text-gray-500 mt-1" v-if="ruleMenu === 'user'"
              >个人信息</text
            >
            <text class="text-xs text-gray-500 mt-1" v-if="ruleMenu !== 'user'"
              >更换头像</text
            >
          </view>
        </view>
      </view>
    </view>

    <view class="mt-6 px-6">
      <view class="bg-white rounded-xl shadow-sm overflow-hidden">
        <navigator
          url="/pages/my/my-info"
          class="flex items-center justify-between p-4 border-b border-gray-100"
        >
          <view class="flex items-center" @click="jump">
            <view
              class="w-8 h-8 bg-blue-100 rounded flex items-center justify-center text-blue-500"
            >
              <wd-icon name="list" size="18"></wd-icon>
            </view>
            <view class="ml-3 text-gray-800">工单管理</view>
          </view>
          <wd-icon name="arrow-right" size="18" color="#ccc"></wd-icon>
        </navigator>

        <navigator
          url="/pages/scan/index"
          class="flex items-center justify-between p-4 border-b border-gray-100"
          v-if="ruleMenu === 'user'"
        >
          <view class="flex items-center" @click="onScan">
            <view
              class="w-8 h-8 bg-green-100 rounded flex items-center justify-center text-green-500"
            >
              <wd-icon name="scan1" size="18"></wd-icon>
            </view>
            <view class="ml-3 text-gray-800">扫一扫</view>
          </view>
          <wd-icon name="arrow-right" size="18" color="#ccc"></wd-icon>
        </navigator>

        <navigator
          url="/pages/address/addressList"
          class="flex items-center justify-between p-4"
          v-if="ruleMenu === 'user'"
        >
          <view class="flex items-center">
            <view
              class="w-8 h-8 bg-purple-100 rounded flex items-center justify-center text-purple-500"
            >
              <wd-icon name="location" size="18"></wd-icon>
            </view>
            <view class="ml-3 text-gray-800">地址管理</view>
          </view>
          <wd-icon name="arrow-right" size="18" color="#ccc"></wd-icon>
        </navigator>

        <navigator
          url="/pages/my/aboutUsPage"
          class="flex items-center justify-between p-4"
        >
          <view class="flex items-center">
            <view
              class="w-8 h-8 bg-purple-100 rounded flex items-center justify-center text-purple-500"
            >
              <wd-icon name="desktop" size="18"></wd-icon>
            </view>
            <view class="ml-3 text-gray-800">关于我们</view>
          </view>
          <wd-icon name="arrow-right" size="18" color="#ccc"></wd-icon>
        </navigator>
      </view>
    </view>

    <wd-overlay :show="show" customStyle="z-index: 999;">
      <view class="flex items-center justify-center h-full flex-col">
        <wd-icon name="loading" size="30" color="#fff" class="animate-spin" />
        <text class="text-white text-sm mt-2">正在上传头像...</text>
      </view>
    </wd-overlay>
  </view>
</template>

<script setup lang="ts">
import { Scan } from '@/utils/unifunc'
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { userOrderStats } from '@/api/order'
import { masterEdit } from '@/api/master'
import { updateAdmin } from '@/api/admin'
import { uploadImage } from '@/utils/upload'

// 可以在这里添加页面逻辑
const userInfo = ref<IUser | any>(uni.getStorageSync('user') || {})
const ruleMenu = uni.getStorageSync('rule') || 'user'
const detail = ref<any>()

const show = ref(false)

const toLoginPage = () => {
  uni.navigateTo({
    url: '/pages/login/loginPage'
  })
}

const userProfile = async () => {
  if (ruleMenu === 'user') {
    uni.navigateTo({
      url: '/pages/my/userProfile'
    })
  } else if (ruleMenu === 'master') {
    show.value = true
    const url = await uploadImage()
    const res = await masterEdit({
      id: uni.getStorageSync('user').id,
      head: url
    })
    show.value = false
    if (res.code === 200) {
      uni.showToast({
        title: '更换头像成功'
      })
      userInfo.value.head = url
      uni.setStorageSync('user', userInfo.value)
    }
  } else {
    show.value = true
    const url = await uploadImage()
    const res = await updateAdmin({
      id: uni.getStorageSync('user').id,
      head: url
    })
    show.value = false
    if (res.code === 200) {
      uni.showToast({
        title: '更换头像成功'
      })
      userInfo.value.head = url
      uni.setStorageSync('user', userInfo.value)
    }
  }
}

const jump = () => {
  uni.switchTab({ url: '/pages/history/orderList' })
}

const onScan = async () => {
  const result = await Scan()
  console.log('🚀 ~ onScan ~ result:', result)
}

const userDetail = async () => {
  const res = await userOrderStats({
    user_id: uni.getStorageSync('user').id
  })
  detail.value = res.data
}

const masterDetail = async () => {
  const res = await userOrderStats({
    master_id: uni.getStorageSync('user').id
  })
  detail.value = res.data
}

const adminDetail = async () => {
  const res = await userOrderStats({})
  detail.value = res.data
}

onShow(async () => {
  userInfo.value = uni.getStorageSync('user') || {}
  if (ruleMenu === 'user') await userDetail()
  else if (ruleMenu === 'master') await masterDetail()
  else await adminDetail()
})
</script>

<style scoped lang="scss"></style>
